JavaScripti Nullish Coalescing: Põhjalik Juhend Vaikimisi Väärtuste Määramiseks

JavaScriptis on vaikimisi väärtuste määramine tavaline ülesanne. Traditsiooniliselt on arendajad selleks kasutanud VÕI operaatorit (||). Kuid ECMAScript 2020-s kasutusele võetud nullish coalescing operaator (??) pakub täpsemat ja usaldusväärsemat viisi vaikimisi väärtuste määramiseks, eriti kui tegemist on null või undefined väärtustega. See juhend pakub põhjalikku ülevaadet nullish coalescing operaatorist, uurides selle süntaksit, käitumist, erinevusi VÕI operaatorist ja praktilisi kasutusjuhtumeid.

Mis on Nullish Coalescing?

Nullish coalescing operaator (??) on loogiline operaator, mis tagastab oma parempoolse operandi, kui selle vasakpoolne operand on null või undefined. Vastasel juhul tagastab see oma vasakpoolse operandi. Lihtsamalt öeldes pakub see vaikimisi väärtuse ainult siis, kui muutuja on rangelt null või undefined.

Süntaks

Nullish coalescing operaatori süntaks on lihtne:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Siin on leftOperand muutuja või avaldis, mida soovite kontrollida null või undefined väärtuse suhtes, ja rightOperand on vaikimisi väärtus, mida soovite määrata, kui leftOperand on tõepoolest null või undefined.

Näide

Vaatleme järgmist näidet:

            const username = null ?? "Guest";
console.log(username); // Väljund: Guest

const age = undefined ?? 25;
console.log(age); // Väljund: 25

const city = "London" ?? "Unknown";
console.log(city); // Väljund: London
            

              
                Copy
              
            
          

Selles näites määratakse muutujale username vaikimisi väärtus "Guest", kuna see on algselt null. Samamoodi määratakse muutujale age väärtus 25, kuna see algab kui undefined. Muutuja city säilitab aga oma algse väärtuse "London", kuna see ei ole null ega undefined.

Nullish vs. Falsy väärtused

On ülioluline mõista JavaScriptis nullish ja falsy väärtuste erinevust. Nullish väärtus on kas null või undefined. Falsy väärtus on väärtus, mida loetakse tõeses kontekstis vääraks. Falsy väärtuste hulka kuuluvad:

• null
• undefined
• 0 (null)
• NaN (Not a Number)
• '' (tühi string)
• false

Peamine erinevus seisneb selles, et nullish coalescing operaator kontrollib ainult null või undefined väärtusi, samas kui VÕI operaator (||) kontrollib mis tahes falsy väärtust.

Erinevus ?? ja || vahel

VÕI operaator (||) on loogiline VÕI operaator, mis tagastab parempoolse operandi, kui vasakpoolne operand on falsy. Kuigi seda saab kasutada vaikimisi väärtuste määramiseks, võib see põhjustada ootamatut käitumist, kui tegemist on väärtustega nagu 0 või tühi string.

Näide: || lõksud

            const quantity = 0 || 10; // Eeldame, et vaikimisi on 10, kui kogus puudub
console.log(quantity); // Väljund: 10 (Ootamatu!) kuna 0 on falsy

const text = '' || 'Default Text'; // Eeldame vaikimisi teksti, kui tekst puudub
console.log(text); // Väljund: Default Text (Ootamatu!) kuna '' on falsy
            

              
                Copy
              
            
          

Esimeses näites soovisime määrata vaikimisi koguseks 10 ainult juhul, kui quantity puudus (null või undefined). Kuna aga 0 on falsy väärtus, määras VÕI operaator valesti vaikimisi väärtuse. Sarnaselt põhjustab tühi string vaikimisi teksti kuvamise isegi siis, kui string on olemas (kuid on tühi).

?? kasutamine täpsuse saavutamiseks

Kirjutame eelmise näite ümber, kasutades nullish coalescing operaatorit:

            const quantity = 0 ?? 10;
console.log(quantity); // Väljund: 0 (Õige!)

const text = '' ?? 'Default Text';
console.log(text); // Väljund: '' (Õige!)
            

              
                Copy
              
            
          

Nüüd on väljund ootuspärane. Nullish coalescing operaator kontrollib ainult null või undefined väärtusi, seega käsitletakse 0 ja '' kehtivate väärtustena ning nende algsed väärtused säilitatakse.

Nullish Coalescing kasutusjuhud

Nullish coalescing operaator on kasulik erinevates stsenaariumides, kus peate pakkuma vaikimisi väärtusi ainult siis, kui muutuja on rangelt null või undefined. Siin on mõned levinumad kasutusjuhud:

1. Valikuliste funktsiooniparameetrite käsitlemine

Valikuliste parameetritega funktsiooni defineerimisel saate kasutada nullish coalescing operaatorit, et pakkuda vaikimisi väärtusi, kui parameetreid ei anta.

            function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Väljund: Hello, User!
greet("Alice"); // Väljund: Hello, Alice!
greet("Bob", "Greetings"); // Väljund: Greetings, Bob!
            

              
                Copy
              
            
          

2. Vaikimisi konfiguratsioonivalikute seadistamine

Konfiguratsiooniobjektidega töötamisel saate kasutada nullish coalescing operaatorit, et tagada vaikimisi väärtuste kasutamine, kui teatud konfiguratsioonivalikuid pole määratud.

            const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Vaikimisi ajalõpp 10 sekundit
  const retries = options.retries ?? 5; // Vaikimisi 5 korduskatset
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Väljund: Timeout: 5000, Retries: 3
fetchData({}); // Väljund: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Väljund: Timeout: 10000, Retries: 5
            

              
                Copy
              
            
          

3. Pesastatud objektide omadustele juurdepääs

Pesastatud objektide omadustele juurdepääsemisel saab nullish coalescing operaatorit kombineerida valikulise aheldamisega (?.), et pakkuda vaikimisi väärtusi, kui mõni vahepealsetest omadustest on null või undefined.

            const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Väljund: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Väljund: Unknown
            

              
                Copy
              
            
          

4. API-de ja väliste andmetega töötamine

API-dest või välistest allikatest andmete toomisel saab nullish coalescing operaatorit kasutada vaikimisi väärtuste pakkumiseks, kui teatud andmeväljad on puudu või neil on null või undefined väärtused. Kujutage ette kasutajaandmete hankimist erinevatest piirkondadest. Oletame, et mõned piirkonnad ei pruugi oma kasutajaandmetes sisaldada välja `country`.

            async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Erinevate API vastuste simuleerimine:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Selle testimiseks oleks vaja tegelikku API-d või mock fetchi.
// Demonstratsiooni eesmärgil simuleerime vastuseid:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Väljund: User is from: USA, Timezone: EST
getUserData(456); // Väljund: User is from: Unknown Country, Timezone: GMT
            

              
                Copy
              
            
          

Operaatorite järjekord

Nullish coalescing operaatoril on suhteliselt madal operaatorite järjekord. See on madalam kui VÕI (||) ja NING (&&) operaatoritel. Seetõttu on nullish coalescing operaatori kombineerimisel teiste loogiliste operaatoritega oluline kasutada sulgusid, et selgesõnaliselt määratleda operatsioonide järjekord. Selle tegemata jätmine võib põhjustada süntaksivigu või ootamatut käitumist.

Näide: Sulgude kasutamine selguse huvides

            // Ilma sulgudeta (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Sulgudega (Õige)
const result = false || (null ?? "Default");
console.log(result); // Väljund: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Väljund: null
            

              
                Copy
              
            
          

Esimeses näites põhjustab sulgude puudumine SyntaxError vea, kuna JavaScripti mootor ei suuda kindlaks teha operatsioonide kavandatud järjekorda. Sulgude lisamisega ütleme mootorile selgesõnaliselt, et ta hindaks esmalt nullish coalescing operaatorit. Teine näide on kehtiv; väljund on aga erinev, kuna esmalt hinnatakse || avaldist.

Brauseri ühilduvus

Nullish coalescing operaator (??) on suhteliselt uus funktsioon, seega on oluline arvestada brauseri ühilduvusega, eriti kui sihtgrupiks on vanemad brauserid. Enamik kaasaegseid brausereid toetab nullish coalescing operaatorit, sealhulgas:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Kui teil on vaja toetada vanemaid brausereid, saate kasutada transpilerit nagu Babel, et teisendada oma kood ühilduvaks JavaScripti versiooniks. Babel muudab ?? operaatori samaväärseks JavaScripti koodiks, mis töötab vanemates keskkondades.

Parimad praktikad

Siin on mõned parimad praktikad nullish coalescing operaatori tõhusaks kasutamiseks:

• Kasutage ?? nullish kontrollideks: Kasutage nullish coalescing operaatorit (??), kui soovite konkreetselt pakkuda vaikimisi väärtust ainult siis, kui muutuja on null või undefined.
• Kasutage keeruliste avaldiste puhul sulgusid: Nullish coalescing operaatori kombineerimisel teiste loogiliste operaatoritega kasutage sulgusid, et selgelt määratleda operatsioonide järjekord.
• Arvestage brauseri ühilduvusega: Kontrollige brauseri ühilduvust ja kasutage vajadusel transpilerit vanemate brauserite toetamiseks.
• Kasutage järjepidevalt: Võtke ?? kasutusele seal, kus see on asjakohane, et saavutada prognoositavam kodeerimisstiil kogu projektis.
• Kombineerige valikulise aheldamisega: Kasutage ?? koos valikulise aheldamisega ?., et turvaliselt pääseda juurde ja määrata vaikimisi väärtusi pesastatud objektide omadustele.

Globaalsed kaalutlused

Globaalsele sihtrühmale arendades arvestage järgmiste punktidega, mis on seotud vaikimisi väärtuste määramisega:

• Lokaliseerimine: Vaikimisi väärtused võivad vajada lokaliseerimist vastavalt kasutaja keelele või piirkonnale. Näiteks vaikimisi valuutasümbol või kuupäevavorming.
• Kultuurilised normid: Teatud vaikimisi väärtusi võib olla vaja kohandada vastavalt kultuurilistele normidele. Näiteks vaikimisi tervitussõnum võib eri kultuurides erineda.
• Juurdepääsetavus: Veenduge, et vaikimisi väärtused oleksid puuetega kasutajatele juurdepääsetavad ja arusaadavad. Pakkuge kasutajaliidestes vaikimisi väärtuste jaoks selgeid ja kirjeldavaid silte.
• Ajatsoonid ja kuupäevad: Kuupäevade ja kellaaegadega töötamisel kasutage sobivaid ajatsoone ja kuupäevavorminguid, et tagada vaikimisi väärtuste korrektne kuvamine kasutajatele eri piirkondades.

Näide: Lokaliseerimine Nullish Coalescing abil

Oletame, et soovite kuvada vaikimisi tervitussõnumi erinevates keeltes vastavalt kasutaja lokaadile. Saate kasutada nullish coalescing operaatorit, et pakkuda vaikimisi sõnumit, kui lokaliseeritud sõnum pole saadaval.

            function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Vaikimisi inglise keel, kui lokaati ei leita
  return message;
}

console.log(getWelcomeMessage("fr")); // Väljund: Bienvenue !
console.log(getWelcomeMessage("es")); // Väljund: Welcome! (Vaikimisi inglise keel)
            

              
                Copy
              
            
          

Kokkuvõte

Nullish coalescing operaator (??) on väärtuslik täiendus JavaScripti keelele. See pakub täpsemat ja usaldusväärsemat viisi vaikimisi väärtuste määramiseks võrreldes VÕI operaatoriga (||), eriti kui tegemist on väärtustega nagu 0 või tühjad stringid. Mõistes selle süntaksit, käitumist ja kasutusjuhtumeid, saate kirjutada puhtamat ja hooldatavamat koodi, mis käsitleb vaikimisi väärtuste määramist täpselt. Pidage meeles arvestada brauseri ühilduvuse, operaatorite järjekorra ja globaalsete kaalutlustega, kui kasutate nullish coalescing operaatorit oma projektides.

Järgides selles juhendis toodud parimaid praktikaid, saate tõhusalt ära kasutada nullish coalescing operaatorit, et parandada oma JavaScripti koodi kvaliteeti ja usaldusväärsust, muutes selle robustsemaks ja lihtsamini mõistetavaks. Pidage meeles, et alati tuleb oma koodis eelistada selgust ja hooldatavust ning nullish coalescing operaator võib olla võimas vahend nende eesmärkide saavutamisel.